<template>
  <div class="change-class body-bg">
    <div v-if="!initLoading">
      <!-- 订单信息 -->
      <div class="order-content">
        <!-- 买课/续费 -->
        <div class="information" v-if="from == '1' || from == '2'">
          <p class="title overflow-one">{{name}}</p>
          <div class="item-cont">
            <p class="class-infor"><img src="/static/images/singUp/singUp-icon1.png" alt="icon">{{address}}</p>
            <p class="class-infor"><img src="/static/images/singUp/singUp-icon2.png" alt="icon">{{open_date}} 至 {{end_date}}</p>
            <p class="class-infor"><img src="/static/images/singUp/singUp-icon3.png" alt="icon">{{goods_week}}</p>
          </div>
        </div>
        <!-- 购买/兑换装备 -->
        <div class="information-zhuangbei" v-if="from == '3' || from == '4'">
          <p class="title">商品信息</p>
          <div class="zhuangbei-cont">
            <img class="product-img" :src="classDetail.img" alt="img">
            <div class="right">
              <p class="product-name overflow-tow">{{classDetail.name}}</p>
              <p class="kucun">库存：120</p>
              <p class="price">￥128 </p>
              <p class="number">×1</p>
            </div>
          </div>
        </div>
        <ul class="price-infor">
          <li>原课时费：<span>￥{{original_amount}}</span></li>
          <!-- <li>商品费：<span>-￥{{classDetail.productPrice}}</span></li> -->
          <!-- <li>优惠：<span>-￥{{classDetail.discount}}</span></li> -->
          <li v-if="from == '2'">请假课时抵扣：<span>-￥{{deduction_amount}}</span></li>
          <li class="yingfu">应付总额：<span>￥{{payment_amount*1}}</span></li>
        </ul>
        <!-- 支付方式 -->
        <div class="pay-cont" v-if="from != '4'">
          <p class="title">支付方式</p>
          <van-radio-group :value="payMoument" @change="onChange">
            <div class="pay-items">
              <p class="pay-items-p"><img class="pay-items-img" src="/static/images/singUp/wechat-icon.png" alt="wechat"> 微信支付</p>
              <van-radio name="1"></van-radio>
            </div>
            <div class="pay-items">
              <p class="pay-items-p"><img class="pay-items-img" src="/static/images/singUp/other-icon.png" alt="other"> 其他支付</p>
              <van-radio name="2"></van-radio>
            </div>
          </van-radio-group>
        </div>
      </div>
      <!-- 底部 -->
      <van-submit-bar
        :loading="loadingBtn"
        label="应付："
        decimal-length="2"
        :price="payment_amount*100"
        button-text="提交订单"
        @submit="onSubmit"
      />
      <!-- <div class="footer">
        <p class="price-cont">应付：<span class="price">￥{{classDetail.price*1 + classDetail.productPrice*1 - classDetail.discount*1}}</span></p>
        <div class="submit-order-btn">提交订单</div>
      </div> -->
    </div>
    <div v-else class="init-loading"><van-loading type="spinner" color="#1989fa" /></div>
  </div>
</template>

<script>
import store from '@/store/globalStore'
export default {
  data() {
    return {
      from: "", // 记录路由来源 1 报名 2 续费 3 装备购买 4 装备兑换
      initLoading: true, // 初始加载
      payMoument: "1", // 支付方式
      loadingBtn: false, // 点击提交，按钮显示loading
      goods_id: "",
      name: "",
      address: "",
      open_date: "",
      end_date: "",
      goods_week: "",
      original_amount: "",
      deduction_amount: "",
      payment_amount: "",
      platform_type: 1, // 1、无请假抵扣 2、有请假抵扣
      renew_goods_id: "", // 续报班级ID
      classDetail: {
        banner: ["https://img.yzcdn.cn/vant/cat.jpeg", "https://img.yzcdn.cn/vant/cat.jpeg"],
        name: "半年-60分钟课程-U6班",
        price: "599",
        img: "https://img.yzcdn.cn/vant/cat.jpeg",
        discountPrice: "500",
        productPrice: "100",
        discount: "90",
        qingjia: "50",
        tips: "随时插班",
        state: 1, // 是否开课 1是 2否
        isTao: 1, // 是否有套餐
        teacherName: "张老师",
        classDate: "2020-01-31 至 2020-12-31",
        week: "周六上课",
        time: "09：30 - 10：30",
        address: "北京市海淀区001",
      }
    }
  },
  onLoad(e) {
    // url中传递了from参数，1 报名 2 续费 3 装备购买 4 装备兑换
    console.log(e)
    this.from = e.from;
    this.loadingBtn = false;
    this.goods_id = e.goods_id;
    this.name = e.name;
    this.address = e.address;
    this.open_date = e.open_date;
    this.end_date = e.end_date;
    this.goods_week = e.goods_week;
    this.original_amount = e.original_amount;
    this.deduction_amount = e.deduction_amount;
    this.payment_amount = e.payment_amount;
    this.renew_goods_id = e.renew_goods_id;
  },
  onUnload(e) {
    this.payMoument = "1";
  },
  onShow() {
    setTimeout(() => {
      this.initLoading = false;
    }, 500);
    if(this.deduction_amount>0){
      this.platform_type = 2
    } else {
      this.platform_type = 1
    }
  },
  methods: {
    // 选择支付方式
    onChange(e) {
      console.log(e)
      this.payMoument = e.mp.detail;
    },
    // 支付
    onSubmit(from) {
      from = this.from;
      console.log("from："+ from)
      console.log("payMoument："+ this.payMoument)
      this.loadingBtn = true;
      if(this.payMoument == '1' && from == '1' || this.payMoument == '1' && from == '2' || this.payMoument == '1' && from == '3'){
        // 此处唤醒微信支付
        console.log("唤醒微信支付")
      } else {
        this.$fetch.addOrder({
          real_amount: this.payment_amount,
          shopping_cart_ids: this.goods_id,
          is_coupon: 2, // 是否使用优惠券（1、是 2、否）
          is_online: this.payMoument,
          platform_type: this.platform_type,
          renew_goods_id: this.renew_goods_id,
        }).then(res=>{
          wx.redirectTo({
            url: `/pages/submitOrderSuccess/main?from=${from}`
          })
        }).catch(err=>{

        })
      }
    }
  },
}
</script>

<style lang="less" scope>
.change-class{
  width: 100%;
  .order-content{
    width: 100%;
    height: calc(~"100vh - 46px");
    overflow: hidden;
    overflow-y: auto;
    .information{
      width: 100%;
      padding: 15px 25px 20px 25px;
      box-sizing: border-box;
      background: #fff;
      margin-bottom: 10px;
      .title{
        width: 100%;
        color: #333;
        font-size: 16px;
      }
      .item-cont{
        width: 100%;
        margin-top: 10px;
        .class-name{
          width: 100%;
          font-size: 14px;
          color: #666;
          font-weight: bold;
        }
        .class-infor{
          width: 100%;
          font-size: 12px;
          color: #999;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-top: 10px;
          img{
            width: 12px;
            height: 12px;
            display: block;
            margin-right: 6px;
          }
        }
      }
    }
    .information-zhuangbei{
      width: 100%;
      background: #fff;
      .title{
        width: 100%;
        border-top: 0.5px solid #dcdcdc;
        padding: 18px 16px;
        box-sizing: border-box;
        font-size: 14px;
        color: #333;
      }
      .zhuangbei-cont{
        width: 100%;
        padding: 16px 15px;
        box-sizing: border-box;
        background: #E5F9FF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .product-img{
          width: 75px;
          min-width: 75px;
          height: 80px;
          display: block;
        }
        .right{
          flex-grow: 1;
          margin-right: 10px;
          height: 80px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          position: relative;
          margin-left: 12px;
          .kucun{
            font-size: 12px;
            color: #999;
          }
          .price{
            font-size: 14px;
            color: #FE4545;
          }
          .number{
            position: absolute;
            right: 15px;
            bottom: 0;
            font-size: 12px;
            color: #333;
          }
        }
      }
    }
    .price-infor{
      width: 100%;
      padding: 15px 25px 20px 25px;
      box-sizing: border-box;
      background: #fff;
      margin-bottom: 10px;
      li{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 14px;
        color: #676767;
        font-size: 14px;
        span{
          color: #000;
        }
        &:last-child{
          margin-bottom: 0;
        }
      }
      .yingfu{
        color: #676767;
        font-weight: bold;
        span{
          color: #FF3333;
        }
      }
    }
    .pay-cont{
      width: 100%;
      padding: 15px 25px 20px 25px;
      box-sizing: border-box;
      background: #fff;
      margin-bottom: 10px;
      .title{
        width: 100%;
        font-size: 16px;
        color: #1A1A1A;
        margin-bottom: 20px;
      }
      .pay-items{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 22px;
        .pay-items-p{
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #1A1A1A;
          .pay-items-img{
            width: 20px;
            height: 20px;
            display: block;
            margin-right: 10px;
          }
        }
      }
    }
  }
  .footer{
    width: 100%;
    height: 46px;
    background: #fff;
    box-shadow:0px 3px 8px 0px rgba(0, 0, 0, 0.42);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .price-cont{
      flex-grow: 1;
      text-align: right;
      margin-right: 10px;
      font-size: 14px;
      .price{
        color: #FF4444;
      }
    }
    .submit-order-btn{
      width: 120px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 16px;
      background: #FF4444;
    }
  }
  .van-submit-bar{
    box-shadow:0px 3px 8px 0px rgba(0, 0, 0, 0.42);
  }
}
</style>
